<template>
  <router-layout>
    <div class="medal me">
      <div class="medal-container">
        <div class="title-box">
          <div class="avatar-box">
            <van-row type="flex" justify="end">
              <van-col span="8" class="avatar-col">
                <div class="upload-box upload-box2">
                  <div class="upload-img upload-img2">
                    <img
                      src="https://gw.alicdn.com/tfs/TB13wVkPrvpK1RjSZPiXXbmwXXa-182-182.png"
                      width="100%"
                      alt
                    >
                  </div>
                </div>
                <p class="user-name">我的勋章</p>
                <div class="bottom-box2">
                  <p>
                    已获得 <span>{{ listInfo.total_nums || 0 }}</span> 枚
                  </p>
                </div>
              </van-col>
              <van-col span="8">
                <router-link to="/Ranking" class="sign-box sign-box2">
                  <p>勋章排行榜</p>
                </router-link>
              </van-col>
            </van-row>
          </div>
        </div>
        <div class="content-box">
          <div class="content-container" v-for="(item, index) in dataList" :key="index">
            <p class="name-text">
              {{ item.medal_name }}
              <span>({{ item.gain_nums }}/{{ item.all_nums }})</span>
            </p>
            <div class="detailed-box detailed-box2">
              <div class="my-icon my-icon2" v-for="(it, index) in item.medalranks" :key="index" @click="selectMedat(it,index)">
                <div class="img-data">
                  <img :src="it.medalrank_img" width="100%" height="100%" alt>
                </div>
                <p class="my-text">{{ it.medalrank_name }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </router-layout>
</template>
<script>
import { medal_listAllMy } from "@/api/medal";
import Nodata from "../public/nodata/Nodata"; // 导入暂无数据组件
import TitleItem from "../../components/public/title/title";
export default {
  name: "Medal",
  components: { Nodata, TitleItem },
  data() {
    return {
      dataList: [],
      listInfo: {},
      listInfoOne: {}
    };
  },
  methods: {
    // 跳转到勋章详情
    selectMedat(item,index) {
      this.$router.push({
        path: "/MedalDetails",
        query: {
          medalrank_id: item.medalrank_id,
          index: index,
          id: item.id
        }
      });
    },
    //获取数据
    async initList() {
      let query = Object.assign({
        company_id: localStorage.getItem("companyId") - 0
      });
      let res = await medal_listAllMy(query);
      let result = res.data;
      if (result.status == 100) {
        this.dataList = result.data.rows;
        this.listInfo = result.data.rows[0];
        this.listInfoOne = result.data.rows[0].medalranks[0];
      }
    }
  },
  created() {
    this.initList();
    this.info = JSON.parse(localStorage.getItem("user"));
  }
};
</script>
<style lang="scss" scoped>
@import "Me";
.name-text {
  background-color: #fafafa;
}
.img-data{
  width: 80px;
  height: 80px;
}
</style>
